import React, { Component } from 'react'
//导入全局css样式
import '../assets/css/Unceter.css'
//导入图片
import img_payment from '../assets/imgs/icon/payment.png'
import img_delivery from '../assets/imgs/icon/delivery.png'
import img_evaluation from '../assets/imgs/icon/evaluation.png'
import img_service from '../assets/imgs/icon/service.png'
import img04 from '../assets/imgs/pic/04.jpg'
//导入接口请求的数据
import { couponRequest, bannerRequest } from '../request/uncenter_request'
//导入登录的信息
import { userinfo } from '../utils/getUserInfo'
//导入antdcss
import 'antd/dist/antd.css';
import { Carousel } from 'antd'
import Header from "../components/DefaultHeader"

export default class uncenter extends Component {
    state = {
        number: 0,
        banner_list: [],
        name:''
    }
    UNSAFE_componentWillMount() {
        //获取登录信息的uid
        var uid = userinfo().uid
        this.setState({name:userinfo().nickname})
        //优惠券数据调用
        couponRequest(uid).then((res) => {
            let number = 0;
            res.list.map(item => {
                return item.content.map(i => {
                    return number++
                })
            })
            this.setState({ number })
        })
        //轮播数据调用
        bannerRequest().then(res => {
            this.setState({ banner_list: res.list })
        })
    }
    exit(){
        localStorage.removeItem('loginData')
        this.props.history.push("/login")
    }
    render() {
        const { number, banner_list,name } = this.state
        return (
            <div id='unceter'>
                {/* <div className="page-title">会员中心</div> */}
                <Header title='会员中心' right_text="退出" right_method={()=>this.exit()}/>
                <div className="container">
                    <div className="top">
                        <div className="header">
                            <div className="avatar">
                                <img src={img04} alt="" />
                            </div>
                            <div className="info">
                                <h3>{name}</h3>
                            </div>
                            <div className="tag">每日签到</div>
                        </div>
                        <ul className="info-list">
                            <li>
                                <h3>12</h3>
                                <p>我的收藏</p>
                            </li>
                            <li>
                                <h3>12</h3>
                                <p>浏览记录</p>
                            </li>
                            <li>
                                <h3>&yen;12</h3>
                                <p>我的红包</p>
                            </li>
                            <li onClick={() => this.props.history.push('/coupon')}>
                                <h3>{number}</h3>
                                <p>优惠券</p>
                            </li>
                        </ul>
                        <div className="order-info">
                            <div className="title">
                                <h3>我的订单</h3>
                                <span>全部订单 &gt; </span>
                            </div>
                            <ul>
                                <li>
                                    <img src={img_payment} alt="" />
                                    <p>待付款</p>
                                </li>
                                <li>
                                    <img src={img_delivery} alt="" />
                                    <p>待收货</p>

                                </li>
                                <li>
                                    <img src={img_evaluation} alt="" />
                                    <p>评价</p>

                                </li>
                                <li>
                                    <img src={img_service} alt="" />
                                    <p>售后/退款</p>

                                </li>
                            </ul>
                        </div>
                    </div>

                    <div className="banner">
                        <Carousel autoplay>
                            {
                                banner_list.map(item => (
                                    <div key={item.id}>
                                        <img src={this.$static_host + item.img} alt="" />
                                    </div>
                                ))
                            }
                        </Carousel>,
                    </div>

                    <ul className="section">
                        <li>地址管理</li>
                        <li>我的钱包</li>
                        <li>我的二维码</li>
                        <li>我的小伙伴</li>
                        <li>0元试用</li>
                    </ul>
                </div>
            </div>
        )
    }
}
